<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>个人中心</span>
      </div>
      <el-row  style="margin: 5px">
        <el-col :span="12">用户名：</el-col>
        <el-col :span="12">{{userInfo.username}}</el-col>
      </el-row>
      <el-row  style="margin: 5px">
        <el-col :span="12">电  话： </el-col>
        <el-col :span="12">{{userInfo.phone}}</el-col>
      </el-row>
      <el-row  style="margin: 5px">
        <el-col :span="12">email：</el-col>
        <el-col :span="12">{{userInfo.email}}</el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import store from "@/store";
import {Message} from "element-ui";

export default {
  name: "PersonalCenter",
  data(){
    return {
      userInfo:{}
    }
  },
  beforeRouteEnter(to,from,next){
    if (store.state.user.isGetInfo){
      next(vm => vm.setUserInfo(store.state.user.info))
    }else {
      console.log('Home:beforeRouteEnter:GetUserInfo')
      this.$store.dispatch('GetUserInfo').then(res=>{
        next(vm =>vm.setUserInfo(res.data) )
      }).catch(err=>{
        Message({'message':'用户信息加载失败,因为'+err.message,type:'error'})
      })
    }

  },
  methods:{
    setUserInfo(res){
      this.userInfo = res
    }
  }
}
</script>

<style scoped>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.box-card {
  margin: 20px;
  width: 300px;
}
</style>
